<template>
	<view class="container">
		<uni-nav-bar backgroundColor="#fff" :border="false" :fixed="true" :statusBar="true">
			<block v-slot:left>
				<uni-icons class="location" @click="gohome" color="#000" type="left" size="20"></uni-icons>
			</block>
			<view class="headernav">
				<view class="search">
					<uni-icons class="location" color="#999" type="search" size="20"></uni-icons>
					<input type="text" v-model="data.keyword" placeholder="请输入订单号进行搜索">
				</view>
			</view>
			<block v-slot:right>
				<view style="display: flex; align-items: center; font-size: 14px;color: #0921a4;" @click="getGoods">
					搜索
				</view>
			</block>
		</uni-nav-bar>
		<view class="pickupmode-box">
			<view class="pickupmode" :class="data.model == 0?'ac':''" @click="selmodel(0)">
				<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1731056668908.png"></image>
				<view class="pickupmode-info">
					堂食/外带
				</view>
				<view class="pickupmode-checked" v-if="data.model == 0">
					<uni-icons color="#0921a4" type="checkbox-filled" size="30"></uni-icons>
				</view>

			</view>
			<view class="pickupmode" :class="data.model == 1?'ac':''" @click="selmodel(1)">
				<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1731056689375.png"></image>
				<view class="pickupmode-info">
					外送
				</view>
				<view class="pickupmode-checked" v-if="data.model == 1">
					<uni-icons color="#0921a4" type="checkbox-filled" size="30"></uni-icons>
				</view>

			</view>
		</view>
		<view class="selctbox">
			<scroll-view class="scroll-view-box" scroll-y="true">
					<z-tabs ref="tabs" :list="data.partition" :current="data.isSingle" @change="onClickItem"
						active-color="#000"></z-tabs>
				</scroll-view>
		</view>
		<view class="No-content" v-if="data.list.length==0">
			<view class="No-content-img">
				<image src="https://pili-vod.guanxikeji.com/xiaotubiao/img/1731117113737.png"></image>
			</view>
			<view class="No-content-text">抱歉，暂无内容~！</view>
			<view class="No-content-btn" @click="$goURl('/pages/Lochig/luckincoffee/Starbucks')">
				<view class="btn">去点餐</view>
			</view>
		</view>
		<view class="list">
		<scroll-view class="bg" scroll-y="true" @scrolltolower='scrolltolower()' :scroll-with-animation="true" style="height: calc(100vh - 120px);">
			<view class="item" v-for="(it,i) in data.list" :key="i" @click="orderdetal(it)">
				<view class="item-title">
					<view class="tit">
						{{it.store_name}}
					</view>
					<view class="time">{{parseDateTime(it.CreatedAt)}}</view>
				</view>
				<view class="item-info">
					<view v-for="(item,index) in resimg(it.goods_detail)">
								<image style="margin-right: 5px;" :src="item"></image>
					</view>
					<view class="right">
						<view class="money Al_Bold">
							{{$toFiexd((it.price+it.freight),2) }}
						</view>
						<view class="num">共{{renumber(it.goods)}}件</view>
					</view>

				</view>
			<!-- 	<view class="item-status">
					<view class="item-status-left">
						<text>超时取消</text>
					</view>
					<view class="item-status-btn">
						<view class="item_btn_gray">联系客服</view>
					</view>
				</view> -->
			</view>
			</scroll-view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	let data = reactive({
		partition: [
			'全部订单', '出餐完成','配送中', "已完成", "出餐失败退款"
		],
		isSingle: 0,
		pages:1,
		page: 0,
		size: 30,
		model: 0,
		keyword: '',
		list: [],
		status:-1,
	})
	onShow(() => {

		getGoods() // 获取订单

	})
	function scrolltolower(){
		getGoods()
	}
	//选择状态 
	function onClickItem(e){
		//状态0=更新取餐码 3=出餐完成 4=配送中 5=已完成 6=出餐失败退款 9=部分退款
		if(e == 1){
			data.status = 3
		}else if(e== 2){
			data.status = 4
		}else if(e== 3){
			data.status = 5
		}else if(e== 4){
			data.status = 6
		}else if(e== 0){
			data.status = -1
		}
			
			data.page = 0
			data.pages = 1
			getGoods()
	}
	function gohome() {
		uni.navigateBack()
	}
	//多少件
	function renumber(row){
			let data = JSON.parse(row)
			return data.length
	}

	function selmodel(e) {
		data.model = e
		data.page = 0
		data.pages = 1
		getGoods()
	}
	//获取订单
	function getGoods() {
		if(data.page<data.pages){
			data.page++
		proxy.$request({
			url: `api/openapi/luckincoffee/orderList/?page=${data.page}&size=${data.size}&model=${data.model+1}&keyword=${data.keyword}&status=${data.status}`,
			method: 'get',
			success: (res) => {
				if (res.errno == 0) {
					console.log(res, "res")
					data.list = res.data.data
					data.pages = Math.ceil(res.data.total / data.size)
				}
			}
		})
			}
	}
	//时间格式
	function parseDateTime(dateTimeStr) {
		// 创建一个新的 Date 对象
		const date = new Date(dateTimeStr);

		// 获取年份、月份、日期、小时、分钟和秒
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		const seconds = String(date.getSeconds()).padStart(2, '0');

		// 返回格式化后的字符串
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	}
	//图片转换
	function resimg(row) {
		let arr = JSON.parse(row)
		let imgarr = []
		arr.forEach((it) => {
			imgarr.push(it.defaultPicUrl)
		})
		if(imgarr.length>=3){
			imgarr.length = 3
		}
		return imgarr
	}
	//查看详情
	function orderdetal(row){
			uni.navigateTo({
				url:'/pages/Lochig/luckincoffee/orderdetail?id='+row.order_id
			})
	}
</script>


<style scoped lang="scss">
	.container {
		.headernav {
			display: flex;
			align-items: center;
			width: 100%;

			.search {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 10upx 20upx;
				background-color: #f5f5f5;
				border-radius: 40upx;

				input {
					font-size: 24upx;
				}

				.location {
					margin-right: 10upx;
				}
			}
		}

		.pickupmode-box {
			padding: 22px 11px;
			display: flex;
			justify-content: space-between;
			background-color: #f9f9f9;

			.pickupmode {
				width: 48%;
				height: 77px;
				border-radius: 11px;
				position: relative;
				display: flex;
				align-items: center;
				border: 1px solid #bfbfbf;
				z-index: 10;

				image {
					width: 44px;
					height: 44px;
					margin-left: 22px;
				}

				.pickupmode-info {
					width: 88px;
					font-size: 16px;
					color: rgba(0, 0, 0, .85);
					font-family: PingFang-SC-Medium, PingFang-SC;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-weight: 700;

					text {
						font-size: 13px;
						color: rgba(0, 0, 0, .45);
						margin-top: 2px;
					}
				}

				.pickupmode-checked {
					width: 24px;
					height: 24px;
					position: absolute;
					top: -8px;
					right: -8px;
					border-radius: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 100;
				}
			}

			.ac {
				border-color: rgb(9, 33, 164);
			}
		}

		.selctbox {
			width: 100%;
			padding-top: 10rpx;
		}

		.No-content {
			width: 100%;
			margin-top: 88px;

			.No-content-img {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 165px;
					height: 110px;
				}


			}

			.No-content-text {
				width: 100%;
				height: 22px;
				font-size: 15px;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: rgba(0, 0, 0, .25);
				line-height: 22px;
				text-align: center;
			}

			.No-content-btn {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 33px;

				.btn {
					width: 287px;
					height: 48px;
					background: #0921a4;
					border-radius: 24px;
					font-size: 17px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #fff;
					line-height: 48px;
					text-align: center;
				}
			}
		}

		.list {

			padding: 0 11px;
			margin-top: 11px;
			padding-bottom: 10px;
			.item {

			
				background: #fff;
				border-radius: 11px;
				padding: 11px;
				margin-bottom: 11px;

				.item-title {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.tit {
						width: 217px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						font-size: 15px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(0, 0, 0, .85);
						padding: 1px 0;
					}

					.time {
						font-size: 11px;
						font-family: AlibabaPuHuiTiM;
						color: rgba(0, 0, 0, .25);
					}
				}

				.item-info {
					height: 93px;
					padding-bottom: 16px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 11px;
					border-bottom: 0.5px solid #f2f2f2;

					image {
						width: 77px;
						height: 77px;
						border-radius: 4px;
					}

					.right {
						flex: 1;
						height: 77px;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						justify-content: flex-end;

						.money {
							height: 30px;
							font-size: 22px;
							font-family: AlibabaPuHuiTiB;
							color: rgba(0, 0, 0, .85);
							line-height: 30px;
						}

						.money::before {
							content: "￥";
							font-size: 13px;
							font-family: AlibabaPuHuiTiB;
							color: rgba(0, 0, 0, .85);
						}

						.num {
							font-size: 13px;
							font-family: AlibabaPuHuiTiM;
							color: rgba(0, 0, 0, .25);


						}
					}

				}

				.item-status {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 16px;

					.item-status-left {
						font-size: 13px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 600;
						color: rgba(0, 0, 0, .85);
					}

					.item-status-btn {
						display: flex;
						justify-content: center;
						align-items: center;

						.item_btn_gray {
							width: 75px;
							height: 35px;
							background: #f2f2f2;
							border-radius: 17px;
							font-size: 13px;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: 700;
							color: rgba(0, 0, 0, .25);
							line-height: 35px;
							text-align: center;
							margin-right: 11px;
						}
					}
				}
			}
		}

	}

	.Al_Bold {
		font-family: webfont !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	::v-deep .z-tabs-conatiner {
		background-color: #f5f5f5 !important;
	}
	::v-deep .z-tabs-item{
		flex: none !important;
	}
</style>